<template>
<view :style="'height: ' + height + 'px; overflow: hidden;'">
	<image :style="'height: 100%; display: ' + chatDisplay" src="/static/images/chat_tabbar2x.png"></image>
	<image :style="'height: 100%; display: ' + contactDisplay" src="/static/images/contact_tabbar2x.png"></image>
	<image :style="'height: 100%; display: ' + noticeDisplay" src="/static/images/notice_tabbar2x.png"></image>
	<image :style="'height: 100%; display: ' + settingDisplay" src="/static/images/setting_tabbar2x.png"></image>

	<view class="tabberContainer">
		<view class="tabbar" data-item="chat" @tap="changeItem"></view>
		<view class="tabbar" data-item="contact" @tap="changeItem"></view>
		<view class="tabbar" data-item="notice" @tap="changeItem"></view>
		<view class="tabbar" data-item="setting" @tap="changeItem"></view>
	</view>

	<view class="login" @tap="login"></view>
</view>
</template>

<script>
// 获取应用实例
var app = getApp();

export default {
  data() {
    return {
      height: 0,
      chatDisplay: 'block',
      contactDisplay: 'none',
      noticeDisplay: 'none',
      settingDisplay: 'none'
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    const me = this;
    uni.getSystemInfo({
      success: function (res) {
        // console.log('height=' + res.windowHeight);
        // console.log('width=' + res.windowWidth);
        // 计算主体部分高度,单位为px
        me.setData({
          height: res.windowHeight
        });
      }
    });
  },
  methods: {
    changeItem(e) {
      const itemKey = e.target.dataset.item;
      this.setData({
        chatDisplay: e.target.dataset.item == 'chat' ? 'block' : 'none',
        contactDisplay: e.target.dataset.item == 'contact' ? 'block' : 'none',
        noticeDisplay: e.target.dataset.item == 'notice' ? 'block' : 'none',
        settingDisplay: e.target.dataset.item == 'setting' ? 'block' : 'none'
      });
    },

    login() {
      uni.redirectTo({
        url: "../login/login"
      });
    }

  }
};
</script>
<style>
@import "./guide.css";
</style>